import 'package:example/src/draggable_card_container.dart';
import 'package:flutter/material.dart';

class CarrousselPage extends StatefulWidget {
  @override
  _CarrousselPageState createState() => new _CarrousselPageState();
}

class _CarrousselPageState extends State<CarrousselPage> {
  List<Color> bgColors = [];
  List<Widget> childItems = [];

  PageController controller;
  int currentpage = 0;

  PageView page;

  double lastOffset = 1.0;

  @override
  initState() {
    super.initState();

    bgColors.add(Colors.black);
    bgColors.add(Colors.orange);
    bgColors.add(Colors.blue);
    bgColors.add(Colors.yellow);
    bgColors.add(Colors.green);

    for (var i = 0; i < bgColors.length; i++) {
      var item = DraggableCard(
        cardPadding: const EdgeInsets.only(
            top: 20.0, left: 10.0, bottom: 20.0, right: 10.0),
        card: Container(
          color: bgColors[i],
        ),
        slideTo: _desiredSlideOutDirection(),
        onSlideUpdate: _onSlideUpdate,
        onSlideComplete: _onSlideComplete,
      );
      childItems.add(item);
    }

    controller = new PageController(
      initialPage: currentpage,
      keepPage: false,
      viewportFraction: 0.7,
    );
    controller.addListener(() {
      print("offset -- ${controller.offset}");
      lastOffset = controller.offset;
    });

    page = PageView.builder(
      itemCount: bgColors.length,
      onPageChanged: (value) {
        currentpage = value;
      },
      controller: controller,
      itemBuilder: (context, index) => builder(index),
    );

    //需要靠移动来触发缩放效果,且移动的距离不能和上次的一致
    Future.delayed(const Duration(milliseconds: 1), () {
      setState(() {
        controller.animateTo(0.1,
            duration: Duration(milliseconds: 1), curve: Curves.bounceIn);
      });
    });
  }

  void reBuildPageContrller() {
    page = null;

    controller.removeListener(() {});
    controller = null;

    controller = new PageController(
      initialPage: currentpage,
      keepPage: false,
      viewportFraction: 0.7,
    );
    controller.addListener(() {
      print("offset -- ${controller.offset}");
      lastOffset = controller.offset;
    });

    GlobalKey pageKey = GlobalKey();

    page = PageView.builder(
      key: pageKey,
      itemCount: bgColors.length,
      onPageChanged: (value) {
        currentpage = value;
      },
      controller: controller,
      itemBuilder: (context, index) => builder(index),
    );
  }

  @override
  dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Carroussel"),
      ),
      body: new Center(
        child: new Container(
          child: page,
        ),
      ),
    );
  }

  builder(int index) {
    var size = MediaQuery.of(context).size;
    return new AnimatedBuilder(
      animation: controller,
      builder: (context, child) {
        double value = 1.0;
        if (controller.position.haveDimensions) {
          value = controller.page - index;
          value = (1 - (value.abs() * .5)).clamp(0.0, 1.0);
        }

        return new Center(
          child: new SizedBox(
            height: Curves.easeOut.transform(value) * size.height,
            width: Curves.easeOut.transform(value) * size.width,
            child: child,
          ),
        );
      },
      child: childItems[index],
    );
  }

  SlideDirection _desiredSlideOutDirection() {
    return null;
  }

  void _onSlideUpdate(double distance) {
    // print(distance);
  }

  void _onSlideComplete(SlideDirection direction) {
    // print("complete $direction");
    bgColors.removeAt(currentpage);
    childItems.removeAt(currentpage);

    reBuildPageContrller();

    setState(() {});

    Future.delayed(const Duration(milliseconds: 1), () {
      print(lastOffset);

      controller.animateToPage(currentpage,
          duration: Duration(milliseconds: 1), curve: Curves.bounceIn);

      setState(() {
        //需要靠移动来触发缩放效果,且移动的距离不能和上次的一致
        controller.animateTo(lastOffset + 0.1,
            duration: Duration(milliseconds: 1), curve: Curves.bounceIn);
      });
    });
  }
}
